<!--
 * @Author: xuna
 * @Descripttion: 新增编辑报名活动
-->
<template>
  <div>
    <el-drawer
      :title="drawerTitle"
      :visible.sync="isOpenEdit"
      :direction="direction"
      :wrapper-closable="false"
      size="40%"
      :before-close="beforeClose"
      class="draw-panel"
    >
      <div v-loading="loading" class="detail-wrap">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div class="detail-label">基本信息</div>
          <div class="basic-detail">
            <el-form-item label="报名标题:" prop="entryTitle">
              <el-input
                v-model="ruleForm.entryTitle"
                placeholder="请输入报名标题"
                :disabled="activityStatus > 1 || activityStatus == 1"
                class="full-input"
              ></el-input>
            </el-form-item>
            <el-row type="flex" class="date-row">
              <el-form-item label="报名时间:" prop="entryStartTime">
                <el-col class="sign-time">
                  <el-date-picker
                    v-model="ruleForm.entryStartTime"
                    type="datetime"
                    placeholder="选择报名开始时间"
                    :disabled="activityStatus > 1 || activityStatus == 1"
                    prefix-icon="null"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="statrPickOption"
                  ></el-date-picker>
                  <i class="el-icon-caret-bottom"></i>
                </el-col>
              </el-form-item>
              <el-col class="tag-icon"><i></i></el-col>
              <el-form-item label="" prop="entryEndTime">
                <el-col class="sign-time">
                  <el-date-picker
                    v-model="ruleForm.entryEndTime"
                    type="datetime"
                    placeholder="选择报名结束时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :disabled="activityStatus > 1"
                    :picker-options="endPickOption"
                    prefix-icon="null"
                    @change="changeEntryEnd"
                  ></el-date-picker>
                  <i class="el-icon-caret-bottom"></i>
                </el-col>
              </el-form-item>
            </el-row>

            <el-form-item prop="headImgs" label="活动头图:" class="upload-img">
              <uploadPicture
                :picture-path="ruleForm.headImgs"
                :is-disable="isDisable"
                @getImgPath="getImgPath"
              ></uploadPicture>
            </el-form-item>
            <el-row type="flex" class="date-row">
              <el-form-item label="活动时间:" prop="activityStartTime">
                <el-col class="sign-time">
                  <el-date-picker
                    v-model="ruleForm.activityStartTime"
                    type="datetime"
                    :disabled="activityStatus > 1"
                    placeholder="选择活动开始时间"
                    prefix-icon="null"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="actStatrOption"
                  ></el-date-picker>
                  <i class="el-icon-caret-bottom"></i>
                </el-col>
              </el-form-item>
              <el-col class="tag-icon"><i></i></el-col>
              <el-form-item label="" prop="activityEndTime">
                <el-col class="sign-time">
                  <el-date-picker
                    v-model="ruleForm.activityEndTime"
                    type="datetime"
                    placeholder="选择活动结束时间"
                    :disabled="activityStatus > 1"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="actEndOption"
                    prefix-icon="null"
                  ></el-date-picker>
                  <i class="el-icon-caret-bottom"></i>
                </el-col>
              </el-form-item>
            </el-row>
            <el-form-item label="活动地址:" prop="activityAddr">
              <el-input
                v-model="ruleForm.activityAddr"
                placeholder="请输入活动地址"
                :disabled="activityStatus > 1"
                class="full-input"
              ></el-input>
            </el-form-item>
          </div>
          <div class="detail-label">
            <i>*</i>
            活动详情
          </div>
          <div class="act-detail">
            <div class="act-textarea">
              <input v-show="false" ref="uploadWidget" type="file" @change="handleImage" />
              <div class="file-img" @click="doUpload">
                <img src="@/assets/img/img_icon.png" alt="" />
                <span>上传图片</span>
              </div>
              <quill-editor
                ref="myQuillEditor"
                v-model="ruleForm.activityDetail"
                :options="editorOption"
                :disabled="activityStatus > 1"
                @change="onEditorChange($event)"
              />
              <div style="text-align:right">{{ TiLength }}/2000</div>
            </div>
            <div class="label-tips">
              <p>图片大小要求：</p>
              <p>· 宽度480 – 620像素</p>
              <p>· 高度小于等于960像素</p>
              <p>· 格式为：JPG\GIF\PNG</p>
              <p>举例：可以上传一张宽度为480，高度为960像素，格式为JPG的图片</p>
            </div>
            <div class="label-tips text-tip">
              <p>文字：</p>
              <p>会去除样式，保留换行</p>
            </div>
          </div>
          <div class="detail-label">
            <i>*</i>
            报名信息
          </div>
          <el-form-item v-model="ruleForm.optionSet" label="" prop="optionSet"></el-form-item>
          <div class="sign-info">
            <div class="sign-list">
              <span v-for="(item, index) in selectSign" :key="item.val" class="sign-col">
                {{ item.val }}
                <i
                  v-if="activityStatus == 0 && index > 0"
                  class="el-icon-close"
                  @click="deleteSign(item, index)"
                ></i>
              </span>
            </div>
            <div class="sign-cont" @mouseover="showSelect = true" @mouseleave="showSelect = false">
              <span v-if="selectSign.length < 8 && activityStatus == 0" class="add-btn">
                添加
              </span>
              <ul v-if="showSelect" class="select-list">
                <li
                  v-for="(item, index) in signList"
                  :key="item.value"
                  :class="{ disabled: item.disabled }"
                  @click="addSign(item, index)"
                >
                  {{ item.value }}
                </li>
              </ul>
            </div>
          </div>

          <div class="detail-label">其他设置</div>
          <el-form-item label="数据查看权限：" prop="jurisdType" class="jurisdType">
            <el-checkbox-group v-model="ruleForm.jurisdType" @change="ladderChange">
              <el-checkbox label="发布人可见" :disabled="activityStatus > 1"></el-checkbox>
              <el-checkbox label="报名参与人可见" :disabled="activityStatus > 1"></el-checkbox>
              <el-row>
                <el-checkbox
                  label="任何人可见（慎选）"
                  :disabled="activityStatus > 1"
                ></el-checkbox>
              </el-row>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="报名按钮文案:" prop="activityDocument" class="jurisdType ">
            <el-select
              v-model="ruleForm.activityDocument"
              placeholder="请选择报名按钮文案"
              class="normal-input"
              :disabled="activityStatus > 1"
            >
              <el-option label="立即报名" value="立即报名"></el-option>
              <el-option label="立即预约" value="立即预约"></el-option>
              <el-option label="填写完成" value="填写完成"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="save-btn">
            <el-button
              class="settbtn"
              :disabled="activityStatus > 1"
              @click="resetForm('ruleForm')"
            >
              取消
            </el-button>
            <el-button
              class="settbtn savebtn"
              type="primary"
              :disabled="activityStatus > 1"
              @click="submitForm('ruleForm')"
            >
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import uploadPicture from './uploadPicture';
  import { signAdd, checkSignDetail, signEdit } from '@/api/votesign';
  import { quillEditor } from 'vue-quill-editor';
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  import { batchUploadImage } from '@/api/noticeinformation';
  import { mapGetters } from 'vuex';
  export default {
    components: { uploadPicture, quillEditor },
    props: {
      signRow: {
        type: Object,
        default() {
          return {};
        },
      },
      isOpenEdit: {
        type: Boolean,
        required: true,
      },
      isEdit: {
        type: Boolean,
        required: true,
      },
    },
    data() {
      return {
        direction: 'rtl',
        drawerTitle: '',
        loading: false,
        ruleForm: {
          entryTitle: '',
          entryStartTime: null,
          entryEndTime: null,
          headImgs: '',
          activityStartTime: null,
          activityEndTime: null,
          activityAddr: '',
          jurisdType: ['报名人参与可见'],
          activityDocument: '立即报名',
          activityDetail: '',
          optionSet: '',
        },
        rules: {
          entryTitle: [
            { required: true, message: '请输入报名标题', trigger: 'blur' },
            { min: 0, max: 30, message: '长度在 0 到 30 个字符', trigger: 'blur' },
          ],
          jurisdType: [
            { type: 'array', required: true, message: '请选择数据查看权限', trigger: 'change' },
          ],
          activityAddr: [{ min: 0, max: 25, message: '长度在 0 到 25 个字符', trigger: 'blur' }],
          entryStartTime: [{ required: true, message: '请选择报名开始时间', trigger: 'blur' }],
          entryEndTime: [{ required: true, message: '请选择报名结束时间', trigger: 'blur' }],
          activityStartTime: [{ required: true, message: '请选择活动开始时间', trigger: 'blur' }],
          activityEndTime: [{ required: true, message: '请选择活动结束时间', trigger: 'blur' }],
          optionSet: [{ required: true, message: '请选择报名信息', trigger: 'blur' }],
          headImgs: [{ required: true, message: '请上传活动头图', trigger: 'blur' }],
          activityAddr: [{ required: true, message: '请输入活动地址', trigger: 'blur' }],
        },
        statrPickOption: {
          disabledDate: time => {
            if (this.ruleForm.entryEndTime != null) {
              return (
                time.getTime() > new Date(this.ruleForm.entryEndTime).getTime() ||
                time.getTime() < new Date().getTime() - 8.64e7
              );
            } else if (this.ruleForm.activityStartTime != null) {
              return (
                time.getTime() > new Date(this.ruleForm.activityStartTime).getTime() ||
                time.getTime() < new Date().getTime() - 8.64e7
              );
            } else if (this.ruleForm.activityEndTime != null) {
              return (
                time.getTime() > new Date(this.ruleForm.activityEndTime).getTime() ||
                time.getTime() < new Date().getTime() - 8.64e7
              );
            } else {
              return (
                time.getTime() > 1609344000000 || time.getTime() < new Date().getTime() - 8.64e7
              );
            }
          },
        },
        endPickOption: {
          disabledDate: time => {
            if (this.ruleForm.entryStartTime != null && this.ruleForm.activityStartTime != null) {
              return (
                time.getTime() < new Date(this.ruleForm.entryStartTime).getTime() - 8.64e7 ||
                time.getTime() > new Date(this.ruleForm.activityStartTime).getTime()
              );
            } else if (this.ruleForm.activityStartTime != null) {
              return (
                time.getTime() > new Date(this.ruleForm.activityStartTime).getTime() ||
                time.getTime() < new Date().getTime() - 8.64e7
              );
            } else if (this.ruleForm.activityEndTime != null) {
              return (
                time.getTime() > new Date(this.ruleForm.activityEndTime).getTime() ||
                time.getTime() < new Date().getTime() - 8.64e7
              );
            } else {
              return (
                time.getTime() > 1609344000000 || time.getTime() < new Date().getTime() - 8.64e7
              );
            }
          },
        },

        actStatrOption: {
          disabledDate: time => {
            if (this.ruleForm.activityEndTime != null) {
              return (
                time.getTime() > new Date(this.ruleForm.activityEndTime).getTime() ||
                time.getTime() < new Date(this.ruleForm.entryEndTime).getTime() - 8.64e7 ||
                time.getTime() < new Date().getTime() - 8.64e7
              );
            } else {
              return (
                time.getTime() < new Date(this.ruleForm.entryEndTime).getTime() - 8.64e7 ||
                time.getTime() < new Date().getTime() - 8.64e7
              );
            }
          },
        },
        actEndOption: {
          disabledDate: time => {
            if (this.ruleForm.activityStartTime != null) {
              return time.getTime() < new Date(this.ruleForm.activityStartTime).getTime() - 8.64e7;
            } else {
              return (
                time.getTime() < new Date(this.ruleForm.entryEndTime).getTime() - 8.64e7 ||
                time.getTime() < new Date().getTime() - 8.64e7
              );
            }
          },
        },
        actDetail: '',
        signList: [
          { label: 'realName', value: '姓名', disabled: true },
          { label: 'mobilePhone', value: '手机号', disabled: false },
          { label: 'idCard', value: '身份证号', disabled: false },
          { label: 'sex', value: '性别', disabled: false },
          { label: 'email', value: '邮箱', disabled: false },
          { label: 'jobNumber', value: '工号', disabled: false },
          { label: 'organName', value: '部门', disabled: false },
          { label: 'position', value: '职位', disabled: false },
        ],
        currentSign: '',
        showSelect: false,
        selectSign: [{ val: '姓名', index: 0 }],
        editorOption: {
          modules: {
            toolbar: [[]],
          },
          theme: 'snow',
        },
        quiEditorImg: '',
        activityStatus: 0,
        isDisable: false,
        TiLength: 0,
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      isClient() {
        return !!this.userInfo.isClient || false;
      },
    },
    watch: {
      signRow(newDtat) {
        console.log(newDtat, '-------------eee---');
        if (newDtat) {
          this.initSign(newDtat && this.isEdit);
        }
      },
    },
    activated() {},
    methods: {
      initSign(val) {
        if (val) {
          this.loading = true;
          this.drawerTitle = '编辑报名活动';
          try {
            checkSignDetail({ id: this.signRow.id }).then(res => {
              this.loading = false;
              if (res.status == 200) {
                console.log(res);
                let data = res.data;
                let exportConfig = JSON.parse(res.data.exportConf);
                // let list = [];
                // for (let val in exportConfig) {
                //   // if (exportConfig[val]) {
                //   list.push(val);
                //   // }
                // }
                console.log(exportConfig, '--------------');
                this.selectSign = [];
                this.signList.map((ele, index) => {
                  if (exportConfig.hasOwnProperty(ele.label)) {
                    ele.disabled = exportConfig[ele.label];
                    if (ele.disabled) {
                      this.selectSign.push({ val: ele.value, index });
                    }
                  }
                });
                console.log(this.signList);
                this.activityStatus = data.activityStatus;
                this.isDisable = this.activityStatus > 1;
                this.ruleForm = {
                  entryTitle: data.entryTitle,
                  entryStartTime: data.entryStartTime,
                  entryEndTime: data.entryEndTime,
                  headImgs: data.headImgs,
                  activityStartTime: data.activityStartTime,
                  activityEndTime: data.activityEndTime,
                  activityAddr: data.activityAddr,
                  activityDetail: data.activityDetail,
                  jurisdType:
                    data.viewPermission == 1
                      ? ['发布人可见']
                      : data.viewPermission == 2
                      ? ['报名参与人可见']
                      : data.viewPermission == 3
                      ? ['任何人可见（慎选）']
                      : [''],
                  activityDocument: data.activityDocument,
                  optionSet: this.selectSign.length ? this.selectSign[0] : '',
                };
              }
            });
          } catch (error) {
            this.loading = false;
          }
        } else {
          this.drawerTitle = '新增报名活动';
          this.activityStatus = 0;
          this.signList.map(val => {
            if (val.label == 'realName') {
              return (val.disabled = true);
            }
            val.disabled = false;
          });
          this.selectSign = [{ val: '姓名', index: 0 }];
          this.isDisable = false;
          this.ruleForm = {
            entryTitle: '',
            entryStartTime: '',
            entryEndTime: '',
            headImgs: '',
            activityStartTime: null,
            activityEndTime: null,
            activityAddr: '',
            jurisdType: ['报名参与人可见'],
            activityDocument: '立即报名',
            activityDetail: '',
            optionSet: '',
          };
        }
      },
      beforeClose() {
        this.$emit('closeDrawer', false);
      },
      ladderChange() {
        if (this.ruleForm.jurisdType.length > 1) {
          this.ruleForm.jurisdType.shift();
        }
      },
      getImgPath(val) {
        this.ruleForm.headImgs = val;
      },
      onEditorChange(event) {
        event.quill.deleteText(2000, 1);
        if (this.ruleForm.activityDetail === 0) {
          this.TiLength = 0;
        } else {
          this.TiLength = event.quill.getLength() - 1;
        }
      },

      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (!this.ruleForm.activityDetail) return this.$message.warning('请填写活动详情');

            let entryStartTime = new Date(this.ruleForm.entryStartTime).getTime();
            let entryEndTime = new Date(this.ruleForm.entryEndTime).getTime();
            let actStartTime = new Date(this.ruleForm.activityStartTime).getTime();
            let actEndTime = new Date(this.ruleForm.activityEndTime).getTime();

            if (entryEndTime < entryStartTime) {
              return this.$message.warning('报名结束时间不能小于报名开始时间');
            }
            if (actEndTime < actStartTime) {
              return this.$message.warning('活动结束时间不能小于活动开始时间');
            }
            if (actEndTime < entryEndTime) {
              return this.$message.warning('活动结束时间不能小于报名结束时间');
            }
            if (!this.isEdit) {
              if (entryStartTime < new Date().getTime()) {
                return this.$message.warning('报名开始时间不能小于当前时间');
              }
            }
            let list = this.signList.filter(val => {
              return val.disabled;
            });
            let exportConfig = {};
            list.map(val => {
              exportConfig[val.label] = true;
            });
            let objData = {
              ...this.ruleForm,
              viewPermission: this.ruleForm.jurisdType[0].includes('发布人')
                ? 1
                : this.ruleForm.jurisdType[0].includes('报名')
                ? 2
                : 3,
              exportConfig,
            };
            this.loading = true;
            if (this.isEdit) {
              // 编辑
              objData = Object.assign(objData, {
                id: this.signRow.id,
                version: this.signRow.version,
              });
              try {
                signEdit(objData).then(res => {
                  this.loading = false;
                  if (res.status == 200) {
                    console.log(res);
                    this.$emit('successEdit', false);
                    this.$refs.ruleForm.resetFields();
                    this.$message({
                      type: 'success',
                      message: '修改成功!',
                    });
                  }
                });
              } catch (error) {
                this.loading = false;
              }
            } else {
              // 新增
              delete objData.jurisdType;
              try {
                signAdd(objData).then(res => {
                  this.loading = false;
                  if (res.status == 200) {
                    console.log(res);
                    this.$emit('successEdit', false);
                    this.$refs.ruleForm.resetFields();
                    this.$message({
                      type: 'success',
                      message: '新建成功!',
                    });
                  }
                });
              } catch (error) {
                this.loading = false;
              }
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$emit('closeDrawer', false);
        if (this.isEdit) return;
        this.$refs[formName].resetFields();
      },
      doUpload() {
        if (this.activityStatus > 1) return;
        this.$refs.uploadWidget.click();
      },
      handleImage() {
        const _this = event.target;
        const file = _this.files[0];
        console.log(file, '-----------');
        if (!/(jpg|png|jpeg|gif)$/.test(file.name.toLowerCase())) {
          this.$message.error('请上传jpg或png或gif格式的图片');
          _this.value = '';
          return;
        }
        if (file.size > 5 * 1024 * 1024) {
          this.$message.error('上传图片不能大于5M');
          _this.value = '';
          return;
        }
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = e => {
          var data = e.target.result;
          //加载图片获取图片真实宽度和高度
          var image = new Image();
          image.src = data;
          image.onload = async () => {
            var width = image.width;
            var height = image.height;
            console.log(width, height); //图片真实宽高
            if (width < 480 || width > 620 || height > 960) {
              return this.$message.error('请上传尺寸宽度480~620高度不大于960的图片');
            }
            let _flie = file;
            if (this.isClient) {
              const { electronReadFile } = require('@/utils/electronUpload');
              _flie = await electronReadFile(_flie.path);
            }
            // const blob = this.dataURLtoBlob(e.target.result);
            let formData = new FormData();
            // formData.append('files', blob);
            formData.append('files', _flie);
            batchUploadImage(formData).then(res => {
              if (res.status == 200) {
                this.quiEditorImg = res.data[0].filePath;
                this.$refs.uploadWidget.value = '';
                this.handleSuccess(res.data[0].filePath);
              }
            });
          };
        };
      },
      handleSuccess(url) {
        let quill = this.$refs.myQuillEditor.quill;
        let length = quill.selection.savedRange.index; // 获取光标所在位置
        quill.insertEmbed(length, 'image', url); // 插入图片
        quill.setSelection(length + 1); // 调整光标到最后
      },
      dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
      },
      getDetail(val) {
        console.log(val);
      },
      addSign(item, index) {
        if (item.disabled) return;
        this.selectSign.push({ val: item.value, index });
        item.disabled = true;
        this.ruleForm.optionSet = this.selectSign[0];
      },
      deleteSign(val, index) {
        this.selectSign.splice(index, 1);
        this.signList[val.index].disabled = false;
        if (!this.selectSign.length) {
          this.ruleForm.optionSet = '';
        }
      },
      changeEntryEnd() {
        //   this.actStatrOption = {
        //     disabledDate: time => {
        //       return time.getTime() < new Date(this.ruleForm.entryEndTime).getTime();
        //     },
        //   };
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  /deep/ .el-drawer__body {
    padding-left: 20px;
  }
  .draw-panel {
    /deep/.el-drawer {
      border-radius: 14px 0 0 14px;
    }
    /deep/.el-drawer__header {
      display: flex;
      align-items: center;
      @include font(16px, #34363b, bold);
      height: 60px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1px 12px 0px rgba(194, 194, 198, 0.31);
      padding: 0 0 0 14px;
      margin-bottom: 0;
    }
    /deep/.el-drawer__body {
      padding: 0;
      box-sizing: border-box;
      overflow-y: auto;
    }
    .detail-label {
      @include wh(100%, 51px);
      background-color: #f7f6f9;
      display: flex;
      align-items: center;
      @include font(14px, #6d6e6e, 800);
      padding-left: 14px;
      box-sizing: border-box;
      > i {
        color: #f56c6c;
        margin-right: 6px;
      }
    }
    .demo-ruleForm {
      width: 100%;
      .basic-detail {
        padding: 9px 30px 0 10px;
        box-sizing: border-box;
        .date-row {
          /deep/.el-form-item {
            margin-right: 0;
            display: flex;
          }
          /deep/.el-form-item__content {
            margin-left: 0 !important;
          }
        }
      }
      /deep/.el-form-item__label {
        @include font(14px, #7f848b, 400);
      }
      .full-input {
        @include wh(100%, 36px);
        border-radius: 7px;
        border: 1px solid #f4f0f3;
      }
      /deep/.el-date-editor {
        @include wh(100%, 36px);
        border-radius: 7px;
        border: 1px solid #f4f0f3;
      }
      .tag-icon {
        @include wh(28px, 37px);
        display: flex;
        justify-content: center;
        align-items: center;
        > i {
          @include wh(7px, 2px);
          background-color: #979698;
        }
      }
      .sign-time {
        @include wh(100%, 36px);
        position: relative;
        /deep/.el-input__inner {
          width: 100%;
          padding: 0 0 0 17px;
          border-radius: 7px;
          border: 1px solid #f4f0f3;
        }
        /deep/.el-date-editor {
          width: 100%;
        }
        > i {
          position: absolute;
          right: 4px;
          top: 50%;
          transform: translateY(-50%);
          color: #979698;
        }
      }
      .upload-img {
        /deep/ .avatar-uploader .el-upload {
          @include wh(189px, 114px);
          background: #f7f6f9;
          border-radius: 7px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        /deep/ .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          @include wh(189px, 114px);
          line-height: 114px;
          background: #f7f6f9;
          border-radius: 7px;
          text-align: center;
        }
        /deep/.el-icon-plus:before {
          @include font(13px, #cacacc, 500);
        }

        /deep/ .avatar {
          @include wh(189px, 114px);
          display: block;
        }
        p {
          padding: 0;
          margin: 0;
          @include font(14px, #7f848b, 400);
          line-height: 26px;
          &.tip {
            @include font(14px, #3770eb, 800);
          }
        }
      }
      .act-detail {
        padding: 9px 20px 0px;
        box-sizing: border-box;
        .act-textarea {
          width: 100%;
          min-height: 325px;
          background-color: #f7f6f9;
          border-radius: 7px;
          padding: 7px 8px;
          box-sizing: border-box;
          .file-img {
            @include wh(100%, 38px);
            background-color: #fff;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            @include font(14px, #1e2023, 400);
            padding-right: 17px;
            box-sizing: border-box;
            > img {
              @include wh(21px, 19px);
              margin-right: 5px;
            }
          }
        }
        .textarea-input {
          width: 100%;
          background-color: #f7f6f9;
          /deep/.el-textarea__inner {
            background-color: #f7f6f9;
            border: 0 none;
          }
        }
        .label-tips {
          margin-top: 17px;
          @include font(14px, #7f848b, 400);
          line-height: 26px;
          &.text-tip {
            padding-bottom: 16px;
            box-sizing: border-box;
          }
          p {
            padding: 0;
            margin: 0;
          }
        }
      }
      .sign-info {
        min-height: 81px;
        background-color: #fff;
        padding: 18px 16px 31px;
        box-sizing: border-box;
        display: flex;
        .sign-cont {
          position: relative;
          display: inline-block;
          .add-btn {
            display: flex;
            @include wh(61px, 36px);
            @include font(14px, #5a73c1, 500);
            justify-content: center;
            align-items: center;
            border-radius: 7px;
            border: 1px solid #d1e0f3;
          }
          .select-list {
            width: 118px;
            position: absolute;
            bottom: 20px;
            background-color: #fff;
            padding: 0;

            box-shadow: 0px 2px 16px 0px #dcdcdc;
            border-radius: 6px;
            li {
              list-style: none;
              @include wh(100%, 40px);
              @include font(13px, #1e2023, 400);
              padding-left: 20px;
              box-sizing: border-box;
              line-height: 40px;
              cursor: pointer;
              &.disabled {
                color: #b4b8be;
                &:hover {
                  background-color: #fff;
                }
              }
              &:hover {
                background-color: #f7f6f9;
              }
            }
          }
        }
        .sign-list {
          display: flex;
          flex-wrap: wrap;
        }
        .sign-col {
          @include font(12px, #1e2023, 400);
          height: 36px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          background: #fafafd;
          border-radius: 7px;
          padding: 0 10px;
          box-sizing: border-box;
          margin: 0 10px 5px 0;

          i {
            color: #b0b0b2;
            padding: 0 6px;
          }
        }
      }
      .jurisdType {
        padding-top: 10px;
        box-sizing: border-box;
        /deep/.el-form-item__label {
          width: 120px !important;
        }
        /deep/.el-form-item__content {
          margin-left: 120px !important;
        }
        .normal-input {
          width: 94%;
        }
      }
    }
  }
  .save-btn {
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
    box-sizing: border-box;
    .settbtn {
      @include wh(100px, 40px);
      background: #fffeff;
      border-radius: 7px;
      border: 1px solid #e8e4e8;
      @include font(14px, #353739, 400);
      &.savebtn {
        background-color: #3771e9;
        color: #fff;
      }
    }
  }

  /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
    border-radius: 50%;
    background-color: #3770eb;
    border-color: #3770eb;
  }
  /deep/.el-checkbox__inner {
    border-radius: 50%;
  }
  /deep/.ql-container {
    min-height: 278px;
  }
  /deep/.ql-toolbar.ql-snow {
    display: none;
  }
  /deep/.ql-container.ql-snow {
    border: 0 none;
  }
</style>
